import React, { memo, useState } from 'react'
import { Avatar,Typography ,Badge,Divider } from 'antd'
const { Paragraph, Text } = Typography;

function  SoushuoList(props, ref){
  let url = 'https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2';
  const [count, setCount] = useState(0);
  const [selected,setSelected] = useState(0)

  const  urlFun = (id)=>{
    setSelected(id)
  }

  return <>

    <div className="ss-head">
      <div className="ss-head-title">搜索建议</div>
      <div className="ss-head-t-box">
        <div>@我</div>
        <div>特别关心</div>
      </div>
    </div>
   <div className="ss-list-mian">
       <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <div className="im-item">
       <div className="im-item-l">
         <Avatar size={45} src={url} />
       </div>
       <div className="im-item-r">
         <div className="im-r-t">
           <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
             进入搜索全部
           </Text>
         </div>
         <div className="im-r-t" >
           <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
             Ant Design, a design language for background applications, is refined by Ant UED Team.
           </Text>
         </div>
       </div>

     </div>
     <Divider />
       <div className="im-item">
         <div className="im-item-l ">
           <div className="yuanxing">
             <i className="iconfont mt-31sousuo"></i>
           </div>
         </div>
         <div className="im-item-r">
           <div className="im-r-t">
             <Text style={{color: selected ===1?"#fff":"#333"}} className="text-l" ellipsis={true}>
               进入搜索全部
             </Text>
           </div>
           <div className="im-r-t" >
             <Text style={{color: selected ===1?"#fff":"#999999"}} ellipsis={true}>
               查找用户、群聊等
             </Text>
           </div>
         </div>

       </div>

     </div>

  </>
}

export default  memo(SoushuoList);
